<template>
	<div>
		<p>
			添加省：
			<el-input type="text" v-model="region.province" style="width:200px;"></el-input>
			<el-button type="primary" @click="addRegionFir" style="margin-left:5px;" size="small" icon="el-icon-plus" circle></el-button>
			<!--<el-button style="float:right;" @click="addRegionSec" size="small" type="success">添加市/区</el-button>-->
		</p>
		<div id="">
			<el-table :data="regionAllData" fit="true" style="width: 100%">
				<el-table-column type="expand">
					<template slot-scope="scope">
						<el-table :show-header="false" :data="scope.row.children" fit="true" style="width: 100%">
							<el-table-column type="expand" v-if="scope.row.children[0].name != ''">
								<template slot-scope="props">
									<el-table :show-header="false" :data="props.row.children" style="width: 100%">
										<el-table-column prop="name"></el-table-column>
										<el-table-column>
											<template slot-scope="thrprops">
												<el-button type="text" @click="addRegion(scope.row.name,props.row.name,thrprops.row.name,2)">编辑</el-button>
											</template>
										</el-table-column>
									</el-table>
								</template>
							</el-table-column>
							<el-table-column prop="name" label="地址名称"></el-table-column>
							<el-table-column>
								<template slot-scope="props">
									<el-button type="text" @click="addProvince(scope.row.name,props.row.name,1)">添加</el-button>
									<el-button type="text" @click="addProvince(scope.row.name,props.row.name,2)">编辑</el-button>
								</template>
							</el-table-column>
						</el-table>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="地址名称"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="props">
						<el-button type="text" @click="addCity(props.row.name,1)">添加</el-button>
						<el-button type="text" @click="addCity(props.row.name,2)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<el-dialog title="添加" :visible.sync="visible" width="30%">
			<div>
				<el-cascader value="name" label="name" :options="regionAllData" v-model="selectedOptions" @change="handleChange">
				</el-cascader>
				<el-input v-model="input" placeholder="请输入市/区"></el-input>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			  </span>
		</el-dialog>

	</div>
</template>

<script>
	import { otherGetRegion, otherRegionAction, Login } from '@/assets/util/api.js'
	export default {
		data() {
			return {
				access_token: "",
				regionAllData: [],
				region: {
					action: "",
					provice: "",
					city: "",
					region: "",
					province_new: "",
					city_new: "",
					region_new: "",
				},
				visible: false,
			};
		},
		mounted() {
			this.access_token = this.inStorage("get", "access_token");
			this.otherGetRegion();
		},
		methods: {
			otherGetRegion() {
				var params = {
					access_token: this.access_token,
				}
				otherGetRegion(this, params).then(res => {
					console.log(res);
					if(res.data.state == true) {
						this.regionAllData = res.data.data;
					}
				})
			},
			addRegionFir() {
				if(!this.region.province) {
					this.$message.error("请输入省份名称否则无法添加！");
					return;
				}
				this.action = 1;
				this.actionRegion();
			},
			addCity(name, action) {
				this.action = action;
				this.region.province = name;
				let str = ""
				if(this.action == 1) {
					str = "请输入城市名称！"
				} else {
					str = "请输入修改后的省名称！"
				}
				this.$prompt(str, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /\S{1,}/,
					inputErrorMessage: '城市名不能为空'
				}).then(({
					value
				}) => {
					if(this.action == 1) {
						this.region.city = value;
					} else {
						this.region.province_new = value;
					}
					this.actionRegion();
				}).catch(() => {});
			},
			addProvince(province, city, action) {
				this.action = action;
				this.region.province = province;
				this.region.city = city;
				let str = "";
				if(this.action == 1) {
					str = "请输入区域名称！"
				} else {
					str = "请输入修改后的城市名称！"
				}
				this.$prompt(str, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /\S{1,}/,
					inputErrorMessage: '区域名称不能为空'
				}).then(({
					value
				}) => {
					if(this.action == 1) {
						this.region.region = value;
					} else {
						this.region.city_new = value;
					}

					this.actionRegion();
				}).catch(() => {});
			},
			addRegion(province, city, region, action) {
				this.action = action;
				this.region.province = province;
				this.region.city = city;
				this.region.region = region;
				let str = "";
				if(this.action == 1) {
					str = "请输入区域名称！"
				} else {
					str = "请输入修改后的区域名称！"
				}
				this.$prompt(str, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /\S{1,}/,
					inputErrorMessage: '区域名称不能为空'
				}).then(({
					value
				}) => {
					if(this.action == 1) {
						this.region.region = value;
					} else {
						this.region.region_new = value;
					}

					this.actionRegion();
				}).catch(() => {});
			},
			actionRegion() {
				var params = {
					access_token: this.access_token,
					action: this.action,
					province: this.region.province,
					city: this.region.city,
					region: this.region.region,
					province_new: this.region.province_new,
					city_new: this.region.city_new,
					region_new: this.region.region_new,
				}
				otherRegionAction(this, params).then((res) => {
					if(res.data.state == true) {
						this.otherGetRegion();
						this.$message.success("添加成功！");
					}

					if(res.data.code) {
						this.$message.error(this.publicMsg(res.data.code, res.data.error));
					}

					this.region = {
						action: "",
						provice: "",
						city: "",
						region: "",
						province_new: "",
						city_new: "",
						region_new: "",
					};
				})
			},
		}
	}
</script>
<style lang="scss" scoped>

</style>